<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户</title>
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <meta name="viewport"
          content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="app-mobile-web-app-capable" content="yes"/>
    <meta name="app-mobile-web-app-status-bar-style" content="black-translucent"/>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_772560_nyw5t78j0pd.css">
    <link rel="stylesheet" href="css/tags.css">
</head>
<body>
<div id="app">
    <div class="tags_wrap">
        <div class="tags_item" v-for="item in list">
            <div class="title">{{item.title}}</div>
            <ul class="tags_ul clear">
                <li class="tag" :class={active:tag.check} v-for="(tag) in item.list" @click="choiceTag(tag)">{{tag.name}}</li>
            </ul>
        </div>
        <div class="add_tag tc" @click="addTag">+</div>
    </div>
    <div class="mask" v-if="mask">
        <div class="pop_content">
            <p class="pop_title tc">添加自定义标签（最多五个字）</p>
            <input class="pop_input" v-model="value" type="text" maxlength="5" placeholder="请输入你要自定义的标签">
            <div class="flex">
                <div class="flex1 btn tc" @click="cancel">取消</div>
                <div class="flex1 btn btn-sure tc" @click="submit">确定</div>
            </div>
        </div>
    </div>
</div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    <script src="js/layer.js"></script>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                list:[],
                activeId:'',
                value:'',
                mask:false
            },
            created:function () {
                this.loadData()
            },
            methods:{
                GetQueryString:function (id) {
                    {
                        var reg = new RegExp("(^|&)"+ id +"=([^&]*)(&|$)");
                        var r = decodeURI(window.location.search.substr(1)).match(reg);
                        if(r!=null)return  unescape(r[2]); return null;
                    }
                },
                loadData:function () {
                    axios({
                        url:'https://qyim.ec51.com/v1/check/list-all-tags?customerID='+this.GetQueryString('id'),
                        method:'get',
                    }).then(res=>{
                        this.list=res.data.data
                    })
                },
                choiceTag:function (tag) {
                    tag.check=!tag.check
                    console.log(tag)
                    var fd=new FormData()
                    fd.append('id',sessionStorage.getItem('login_identifier'))
                    fd.append('tagID',tag.id)
                    fd.append('customerID',this.GetQueryString('id'))
                    var type=''
                    if(tag.check){
                        type=2
                    }else{
                        type=1
                    }
                    fd.append('type',type)
                    axios.post('https://qyim.ec51.com/v1/check/change-tag',fd).then(res=>{

                    });
                },
                addTag:function () {
                    this.mask=true
                },
                cancel:function () {
                    this.mask=false
                },
                submit:function () {
                    if(!this.value){
                        alert('请输入标签名')
                        return
                    }
                    var fd=new FormData()
                    fd.append('id',sessionStorage.getItem('login_identifier'))
                    fd.append('customers',this.GetQueryString('id'))
                    fd.append('tag',this.value)
                    fd.append('type',2)
                    axios.post('https://qyim.ec51.com/v1/check/create-tag',fd).then(res=>{
                        if(res.data.status.message!='ok'){
                            alert(res.data.status.message)
                        }
                        this.mask=false
                        location.reload()
                    })
                    console.log(this.value)
                }
            }
        })
    </script>
</body>
</html>